<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityIds' v-if="formInline.id">
					{{ isNullOrEmpty(formInline?.unityName) }}
				</el-form-item>
				<el-form-item :label='titles?.unityIds' prop='unityIds' v-else>
					<unitParentSelect v-model='formInline.unityIds' multiple clearable :placeholder='prompt?.unityIds'
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'unityIds')" />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.userIds' v-if="formInline.id">
					{{ isNullOrEmpty(formInline?.nickname) }}
				</el-form-item>
				<el-form-item :label='titles?.userIds' prop='userIds' v-else>
					<unitUserListSelect v-model="formInline.userIds" clearable multiple :placeholder="prompt.userIds"
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'userIds')" />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.roleIds' prop='roleIds'>
					<usersRoleSelect v-model='formInline.roleIds' :unityId="unityId" clearable
						:placeholder='prompt?.roleIds' multiple :style="{ width: '100%' }"
						@blur="formValidateField(ruleFormRef, 'roleIds')" />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/users-manager/unit-authorization/index';
import unitParentSelect from '@/components/select/unitParentSelect/unitParentSelectTree.vue'
import unitUserListSelect from '@/components/select/unitUserListSelect/unitUserListSelect.vue'
import usersRoleSelect from "@/components/select/usersRoleSelect/usersRoleSelect.vue";
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	unityId: string
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	unityId: ''
});

const formRules = reactive(<FormRules>{
	unityIds: [{ required: true, message: prompt?.unityIds, trigger: 'blur' },],
	userIds: [{ required: true, message: prompt?.userIds, trigger: 'blur' },],
	roleIds: [{ required: true, message: prompt?.roleIds, trigger: 'blur' },],
});
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
